<template>
    <div class="reco-container" @mouseenter="stop" @mouseleave="start" :style="`background: ${background}`">
        <span class="last" @click="last">&lt;</span>
        <span class="next" @click="next">&gt;</span>
        <div class="bannerx banner1">
            <ul class="banner-list">
                <li v-for="item in list" :key="item.id">
                    <transition name="fade">
                        <img :src="item.imgSrc" alt="图片" v-show="item.id === currentIndex">
                    </transition>
                </li>
            </ul>
            <ol>
                <li @click="currentIndex = item.id" :class=" { nowbanner: item.id == currentIndex } "
                    v-for="item in clickList" :key="item.id"></li>
            </ol>
            <div class="download-cloud"></div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'recommend',
    data() {
        return {
            list: [
                { id: 0, imgSrc: require('../assets/banner/banner9.jpg') },
                { id: 1, imgSrc: require('../assets/banner/banner1.jpg') },
                { id: 2, imgSrc: require('../assets/banner/banner2.jpg') },
                { id: 3, imgSrc: require('../assets/banner/banner3.jpg') },
                { id: 4, imgSrc: require('../assets/banner/banner4.jpg') },
                { id: 5, imgSrc: require('../assets/banner/banner5.jpg') },
                { id: 6, imgSrc: require('../assets/banner/banner6.jpg') },
                { id: 7, imgSrc: require('../assets/banner/banner7.jpg') }
            ], // 轮播图列表
            clickList: [{ id: 0 }, { id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }, { id: 6 }, { id: 7 }], // 切换banner的小圆点
            currentIndex: 0, // 控制轮播图的切换
            background: '#f78279'
        }
    },
    watch: {
        // 监听 currentIndex
        currentIndex(newVal, oldVal) {
            if (newVal == this.list.length) {
                this.currentIndex = 0
            }
            //  背景色
            switch (newVal) {
                case 0:
                    this.background = '#f78279'
                    break
                case 1:
                    this.background = '#c5dfee'
                    break
                case 2:
                    this.background = '#4f6161'
                    break
                case 3:
                    this.background = '#111621'
                    break
                case 4:
                    this.background = '#eec8a4'
                    break
                case 5:
                    this.background = '#96959b'
                    break
                case 6:
                    this.background = '#131512'
                    break
                case 7:
                    this.background = '#28231f'
                    break
            }
        }
    },
    methods: {
        // 启动定时器
        start() {
            this.timer = setInterval(() => {
                this.currentIndex++
            }, 4000)
        },
        // 停止定时器
        stop() {
            clearInterval(this.timer)
        },
        // 上一张
        last() {
            if (this.currentIndex === 0) {
                this.currentIndex = 7
            } else {
                this.currentIndex -= 1
            }
        },
        // 下一张
        next() {
            if (this.currentIndex === 7) {
                this.currentIndex = 0
            } else {
                this.currentIndex += 1
            }
        }
    },
    mounted() {
        // 开启定时器
        this.start()
    }
}
</script>

<style lang="less" scoped>
@import '../assets/base.less';

.reco-container {
    position: relative;

    // background-color: @red;
    .last,
    .next {
        position: absolute;
        height: 70px;
        width: 45px;
        top: 50%;
        margin-top: -35px;
        color: #f1ede5;
        cursor: pointer;
        line-height: 60px;
        font-size: 60px;

        &:hover {
            background: rgba(0, 0, 0, 0.2);
        }
    }

    .last {
        left: 200px;
    }

    .next {
        right: 200px;
    }

    .bannerx {
        position: relative;
        height: 285px;
        cursor: pointer;

        ol {
            width: 200px;
            position: absolute;
            right: 511px;
            bottom: 10px;
            z-index: 999;
            display: flex;
            justify-content: space-between;

            li {
                background-color: #f6e9d9;
                width: 7px;
                height: 7px;
                border-radius: 50%;

                &:hover {
                    background-color: @red;
                }
            }

            .nowbanner {
                background-color: @red;
            }
        }

        .banner-list {
            float: left;
            height: 100%;
            width: 75%;
            position: relative;

            li {
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
                img {
                    width: 100%;
                    height: 100%;
                    transition: 0.1s;
                }
            }
        }

        .download-cloud {
            float: right;
            width: 25%;
            height: 100%;
            background: no-repeat url(../assets/images/download.png) 1px 0;
        }
    }
}

.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.5s;
}

.fade-enter,
.fade-leave-to

/* .fade-leave-active below version 2.1.8 */
    {
    opacity: 0.7;
}

.fade-enter-to,
.fade-leave {
    opacity: 0.5;
}
</style>